<template></template>
<!-- 通知组件 -->
<script>
import moment from "moment";
export default {
  name: "widgetNotification",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      lastTime: null,
      options: {},
      // optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      // optionsCollapse: {}, // 图标属性
      optionsSetup: {},
    };
  },
  computed: {
  },
  created() {
    this.lastTime = moment().format("YYYY-MM-DD HH:mm:ss");
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  methods: {
    // 创建推送
    createNotification(opt) {
      // TODO create Notification
      if (this.options.message) {
        this.$notify(opt);
      }
    },
    // 修改图标options属性
    editorOptions() {
      this.setOptionsValue();
      this.setOptionsData();
    },
    // 数值设定
    setOptionsValue() {
      this.options = { ...this.optionsSetup };
    },
    setOptionsData() {
      console.log("setOptionsData");
      const optionsData = this.optionsData; // 数据类型 静态 or 动态

      optionsData.dataType == "staticData"
        ? this.staticDataFn(optionsData.dynamicData, optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticDataFn(opt, val) {
      console.log("staticDataFn");
      const staticData = typeof val == "string" ? JSON.parse(val) : val;
      this.renderingFn(opt, staticData);
    },
    dynamicDataFn(val, refreshTime) {
      console.log("dynamicDataFn");
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      val.contextData.last_time = this.lastTime;
      console.log(val.contextData.last_time, "last_time");
      const data = this.queryEchartsData(val);
      data.then((res) => {
        this.renderingFn(val, res);
      });
    },
    async renderingFn(dynamicOpt, data) {
      this.lastTime = moment().format("YYYY-MM-DD HH:mm:ss");
      console.log(data, "data");

      for (let i = 0; i < data.length; i++) {
        if (i > 10) break;
        let opt = Object.assign(this.options, data[i]);
        await this.createNotification(opt);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>